<template>
  <div class="room-list">
    <div class="title-box">
      <div class="title">
        宿舍分布情况
      </div>
      <div class="select-box">
        <!--        <a-checkbox-group v-model:value="checkValue"-->
        <!--                          :options="selectOptions"-->
        <!--                          name="checkboxgroup" @change="checkChange"-->
        <!--        />-->
        <!--                <a-select-->
        <!--                    :bordered="false"-->
        <!--                    v-model:value="value"-->
        <!--                    :options="selectOptions"-->
        <!--                    mode="multiple"-->
        <!--                    placeholder="Please select"-->
        <!--                    style="width: 100%"-->
        <!--                ></a-select>-->
<!--        <div class="selectInfo">-->
<!--          筛选>-->
<!--        </div>-->
<!--        <div class="selectList">-->
<!--          <div v-for="item in selectOptions" :key="item.value"-->
<!--               :kong="item.value===3"-->
<!--               :select="item.select"-->
<!--               :style="{background:item.color}"-->
<!--               class="selectBox"-->
<!--               @click="selectChange(item)"-->
<!--          ></div>-->
<!--        </div>-->
      </div>
    </div>
    <div class="rooms">
      <div v-for="(roomWrap, roomWrapIndex) in roomList" :key="roomWrapIndex" class="room-wrap">
        <div class="floor">
          {{ roomWrap.floor }}F
        </div>
        <div class="room-box">
          <div
              v-for="(roomItem, roomItemIndex) in roomWrap.datas"
              :key="roomItemIndex"
              :error="roomItem.type === 2"
              :kong="roomItem.type === 3"
              :selected="roomWrapIndex === selectedRoom[0] && roomItemIndex === selectedRoom[1]"
              :warn="roomItem.type === 4"
              class="room-item flex-center"
              @click.stop="onSelectRoom(roomWrapIndex, roomItemIndex,roomWrap.floor,roomItem.type)"
          >
            <div :class="{active:roomItem.type === 1}" class="info flex-center">
              {{ roomItem.type === 3 ? "" : roomItem.ygrs }}
            </div>
            <div class="number">
              {{ roomItem.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, watch} from "vue";
import {reactive} from "@vue/reactivity";
import {inject} from "@vue/runtime-core";

// eslint-disable-next-line no-undef
const props = defineProps({
  datas: {
    type: Object,
    default: () => {
    },
  },
  page: {
    type: Array,
    default: () => [],
  },
});

const smartObject = inject("smartObject");
const lou = ref([]);
const checkValue = ref([1, 2, 3, 4]);
const roomList = ref([]);
const pageIndex = reactive({
  index: 0,
  name: 0,
  total: 0,
});
const selectOptions = ref([
  {
    label: "全部已归",
    value: 1,
    color: "#579FFF",
    select: true
  },
  {
    label: "部分已归",
    value: 4,
    color: "#DAA363",
    select: true
  },
  {
    label: "全部未归",
    value: 2,
    color: "#9D1C1C",
    select: true
  },
  {
    label: "空闲",
    value: 3,
    color: "transparent",
    select: true
  },
]);
// eslint-disable-next-line no-undef
const emit = defineEmits(["select", "pageChange"]);

// 楼表
const getL = async () => {
  emit("pageChange", smartObject.ssl);
};
getL();
const checkChange = (item) => {
  checkValue.value = item
  let arr = {};
  for (const key in props.datas) {
    let thisData = props.datas[key];
    let newArr = thisData.datas.filter(item => {
      return checkValue.value.includes(item.type);
    });
    if (newArr.length !== 0) {
      arr[key] = {
        datas: newArr,
        floor: thisData.floor
      };
    }
  }
  roomList.value = arr;
};
const selectChange = (item) => {
  item.select = !item.select;
  checkValue.value = selectOptions.value.filter(item => {
    return item.select;
  }).map(i => i.value);
  checkChange();
};
const prePage = () => {
  smartObject.ssl >= 1 ? pageIndex.index-- : "";
  emit("pageChange", lou.value[pageIndex.index]);
};

const nextPage = () => {
  pageIndex.index < lou.value.length - 1 ? pageIndex.index++ : "";
  emit("pageChange", lou.value[pageIndex.index]);
};

const selectedRoom = ref([-1, -1]);

const onSelectRoom = (l1, l2, floor, type) => {
  selectedRoom.value = [l1, l2];
  emit("select", {data: props.datas[l1].datas[l2], floor, type},);
};

const closeRoom = () => {
  selectedRoom.value = [-1, -1];
};

defineExpose({
  selectedRoom,
  closeRoom,
  checkChange
});

watch(props.datas, (newValue, oldValue) => {
  checkChange();
}, {immediate: true, deep: true});
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
